<template>
	<view class="online-page">
		<c-layout>
			<c-navigation-bar slot="head" :title='$t("home.OnlineFinance")' titleColor=" #000000"></c-navigation-bar>

			<scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom1">
				<view class="list-box" v-for="item in lists" :key="item.investment">
					<view class="image-box">
						<view class="banner">
							<image :src="$u.file.getMedieUrl(item.cover) " mode=""></image>
						</view>

						<view class="crown">
							<image src="../../static/images/crown.svg" mode=""></image>
							<view class="vip-box">VIP{{ item.limitUserLevel }}</view>
						</view>
					</view>
					<view class="info-box">
						<view class="left-box">
							<view class="progress">
								<uni-tooltip :content="item.name">
									<view class="tittle1">{{item.name}}</view>
								</uni-tooltip>
								<view class="tittle2">{{ item.status==1?$t("product.InProgress"):$t("product.Settled")}}</view>
							</view>

							<view class="">
								<view class="tittle3">{{$t('product.Investment') }}</view>
								<view class="price-box">
									<view class="tittle4">$</view>
									<view class="tittle5">{{ item.maxAmount }}</view>
								</view>
							</view>
							<view class="">
								<view class="tittle3">{{$t('product.ReturnRate') }}</view>
								<view class="price-box">

									<view class="tittle5">{{ item.interestRate*100 }}%</view>
								</view>
							</view>
							<view class="">
								<view class="tittle3">{{$t('product.EarningCycle') }}</view>
								<view class="price-box">

									<view class="tittle5">0{{ item.period }} Day</view>
								</view>
							</view>

							<view class="">
								<view class="tittle3">{{$t('product.participants') }}</view>
								<view class="price-box">

									<view class="tittle5">{{Number(item.realityCount)+Number(item.buyUser) }}/{{item.dummyUser}}</view>
								</view>
							</view>
						</view>
						<view class="right-box" @click="handleBuy(item)">
							<view class="held-box" v-if="item.buy">{{$t('product.Held') }}</view>
							<view class="" v-else>{{$t('product.buyQuickly') }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,

				lists: [
					// {
					// 	vip: 2,
					// 	online: 'In progress',
					// 	investment: 300.0
					// },
					// {
					// 	vip: 1,
					// 	online: 'In progress',
					// 	investment: 200.0
					// },
					// {
					// 	vip: 2,
					// 	online: 'In progress',
					// 	investment: 100.0
					// },
					// {
					// 	vip: 3,
					// 	online: 'In progress',
					// 	investment: 500.0
					// },
					// {
					// 	vip: 2,
					// 	online: 'In progress',
					// 	investment: 600.0
					// }
				]
			};
		},
		onLoad() {
			this.getLists()
		},
		methods: {
			getLists() {
				let data = {
					pageSize: 100,
					pageNum: this.current,

				}
				this.$u.post('/app/financial/online/financialOnlinePage', data).then((d) => {

					const nextDataList = d.data.records // 假设接口返回数据格式为 { data: [...] }
					if (nextDataList.length > 0) {
						this.lists = this.lists.concat(nextDataList);
						console.log(this.lists);
						this.current++;
					} else {
						uni.showToast({
							title: 'no more',
							icon: 'none'
						});
					}
				})
			},
			handleBuy(item) {
				uni.navigateTo({
					url: `/pages/moneyManagement/productDetails?id=${item.id}&type=${item.buy}&limitLevel=${item.limitUserLevel}`,
				})
			},
			//触底加载
			onreachBottom1() {
				console.log('reresh');
				this.getLists()
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.c-navigation-bar .navbar .center[data-v-11ec4984] uni-text span {
		font-size: 28rpx;

		font-weight: 600;
	}

	/deep/.uni-scroll-view,
	.uni-scroll-view-content {
		height: 98%;
		overflow: auto;
	}

	.uni-scroll-view {
		margin-bottom: 100rpx;
	}

	.list-box {
		border-radius: 26rpx;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
		height: 490rpx;
		margin: 70rpx 40rpx;

		.image-box {
			width: 100%;
			height: 272rpx;

			position: relative;

			.banner {
				width: 100%;
				height: 100%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			}

			.crown {
				position: absolute;
				right: 2px;
				top: -21px;
				width: 83rpx;
				height: 83rpx;
				z-index: 999;

				image {
					width: 100%;
					height: 100%;
				}

				.vip-box {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translateX(-50%) translateY(-50%);
					color: #ffffff;
					font-size: 20rpx;
				}
			}
		}

		.info-box {
			position: relative;
			width: 100%;
			padding: 20rpx 34rpx 28rpx 32rpx;
			display: inline-flex;
			justify-content: space-between;

			.left-box {
				.progress {
					margin-bottom: 16rpx;
					position: absolute;
					top: -70rpx;
					left: 20rpx;
				}

				view {
					display: flex;
					align-items: flex-end;

					.tittle1 {
						font-size: 28rpx;
						font-weight: 500;
						margin-right: 24rpx;
						color: #fff;
						background: #333755;
						border-radius: 40rpx;
						text-align: center;
						display: block;
						overflow: hidden;
						width: 200rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.tittle2 {
						width: 136rpx;
						height: 34rpx;
						background: #333755;
						border-radius: 8rpx;
						font-size: 20rpx;
						font-weight: 500;
						color: #ffffff;
						line-height: 34rpx;
						text-align: center;
						justify-content: center;
					}

					.tittle3 {
						color: #929293;
						font-weight: 500;
						font-size: 24rpx;
						margin-right: 16rpx;
					}

					.tittle4 {
						font-size: 19rpx;
						color: #f75f6a;
						font-weight: 500;
						margin-right: 5rpx;
					}

					.tittle5 {
						font-size: 36rpx;
						font-weight: 500;
						color: #f75f6a;
						margin-bottom: -4rpx;
					}
				}
			}

			.right-box {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				right: 40rpx;
				top: 30%;

				view {
					width: 178rpx;
					height: 52rpx;
					background: #2934d0;
					border-radius: 14rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #ffffff;
					line-height: 52rpx;
					text-align: center;
				}

				.held-box {
					background: #cfcfcf;
					color: #6b6262;
				}
			}
		}
	}

	.price-box {
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}
</style>